<template>
  <d2-container>
    <template slot="header">
      <el-form
        :inline="true"
        :model="queryForm"
        ref="queryForm"
        size="mini"
        style="margin-bottom: -18px;"
      >
        <el-form-item label="客户编号" prop="customerCertificateNumber">
          <el-input
            v-model="queryForm.params.customerCertificateNumber"
            placeholder="客户编号"
            style="width: 100px;"
          />
        </el-form-item>

        <el-form-item label="客户名称" prop="customerName">
          <el-input
            v-model="queryForm.params.customerName"
            placeholder="客户名称"
            style="width: 100px;"
          />
        </el-form-item>

        <el-form-item label="户号地址" prop="householdAddress">
          <el-input
            v-model="queryForm.params.householdAddress"
            placeholder="户号地址"
            style="width: 100px;"
          />
        </el-form-item>

        <el-form-item label="户号名称" prop="householdName">
          <el-input
            v-model="queryForm.params.householdName"
            placeholder="户号名称"
            style="width: 100px;"
          />
        </el-form-item>

        <el-form-item label="户号手机号" prop="householdPhone">
          <el-input
            v-model="queryForm.params.householdPhone"
            placeholder="户号手机号"
            style="width: 100px;"
          />
        </el-form-item>

        <el-form-item label="户号" prop="householdSerialnumber">
          <el-input
            v-model="queryForm.params.householdSerialnumber"
            placeholder="户号"
            style="width: 100px;"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFormSubmit">
            <d2-icon name="search" />查询
          </el-button>
        </el-form-item>
      </el-form>
    </template>
    <split-pane :min-percent="10" :max-percent="20" :default-percent="20" split="vertical">
      <template slot="paneL">
        <my-area-tree @change="onAreaChange" />
      </template>
      <template slot="paneR">
        <d2-crud
          ref="d2Crud"
          :columns="columns"
          :data="data"
          :loading="loading"
          :pagination="pagination"
          @pagination-current-change="paginationCurrentChange"
          :form-options="formOptions"
        ></d2-crud>
      </template>
    </split-pane>
  </d2-container>
</template>

<script>
import MyAreaTree from "@/components/my-area-tree";
export default {
  name: "customer",
  components: { MyAreaTree },
  data() {
    return {
      loading: false,
      pagination: {
        currentPage: 1,
        pageSize: 5,
        total: 0
      },
      queryForm: {
        params: {
          areaId: "1",
          // chargeType: '0', // 费用类型
          customerCertificateNumber: "", // 客户身份证
          customerName: "", // 客户名称
          householdAddress: "", // 户号地址
          householdName: "", // 户号名称
          householdPhone: "", // 户号手机号
          householdSerialnumber: "" // 户号
          // cycle: '0', // 统计周期
          // date: '', // 时间
          // payway: '', // 支付方式
          // paychannel: '' // 收费渠道
        },
        chargeTypeList: [
          {
            name: "缴费",
            id: "0"
          },
          {
            name: "退费",
            id: "1"
          }
        ],
        cycleList: [
          {
            name: "日",
            id: "0"
          },
          {
            name: "月",
            id: "1"
          },
          {
            name: "季",
            id: "2"
          },
          {
            name: "年",
            id: "3"
          }
        ],
        dateName: "",
        dateList: [
          { name: "第一季度", value: "0" },
          { name: "第二季度", value: "1" },
          { name: "第三季度", value: "2" },
          { name: "第四季度", value: "3" }
        ],
        paywayList: [
          { name: "现金", value: "0" },
          { name: "微信", value: "1" },
          { name: "支付宝", value: "2" },
          { name: "系统", value: "3" }
        ],
        paychannelList: [
          { name: "物业", value: "0" },
          { name: "移动终端", value: "1" },
          { name: "费用核算", value: "2" }
        ]
      },
      treeData: null,
      columns: [
        {
          title: "序号",
          key: "serialNum"
        },
        {
          title: "账单编号",
          key: "billNumber"
        },
        {
          title: "出账日",
          key: "billDay"
        },
        {
          title: "表计用量",
          key: "dosage"
        },
        {
          title: "户号",
          key: "householdSerialnumber"
        },
        {
          title: "合计价格",
          key: "price"
        },
        {
          title: "缴费状态",
          key: "billStatus",
          component: {
            render: (h, row, node, index) => {
              if (row.billStatus === 0) {
                return <span>未交费</span>;
              } else if (row.billStatus === 1) {
                return <span>已缴费</span>;
              } else if (row.billStatus === 2) {
                return <span>订单异常</span>;
              } else {
                return <span>已取消</span>;
              }
            }
          }
        },
        {
          title: "户号地址",
          key: "householdAddress"
        },
        {
          title: "户号名称",
          key: "householdName"
        },
        {
          title: "户号电话",
          key: "householdPhone"
        },
        {
          title: "客户名称",
          key: "customerName"
        },
        {
          title: "客户电话",
          key: "customerPhone"
        }
      ],
      data: [],
      formOptions: {
        labelWidth: "80px",
        labelPosition: "left",
        saveLoading: false
      }
    };
  },
  watch: {
    // 'queryForm.params.cycle': {
    //   handler (val, oval) {
    //     if (val === 2 || val === '2') {
    //       this.queryForm.params.date = '0'
    //     } else {
    //       this.queryForm.params.date = ''
    //     }
    //     console.log(this.queryForm.cycleList)
    //     this.queryForm.dateName = `选择${this.queryForm.cycleList[val].name}`
    //   },
    //   deep: true,
    //   immediate: true
    // }
  },
  mounted() {
    this.getPageList();
  },
  methods: {
    paginationCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.getPageList();
    },
    onAreaChange(data, node) {
      this.queryForm.params.areaId = data.id;
      this.pagination.currentPage = 1;
      this.getPageList();
    },
    // 获取账单列表
    async getPageList() {
      const res = await this.$api.admin_bill_getPageList({
        pageNum: this.pagination.currentPage,
        pageSize: this.pagination.pageSize,
        ...this.queryForm.params
      });
      if (res && res.columns) {
        const { data } = res;
        this.data = data;
        this.pagination.total = res.total;
        this.loading = false;
      }
      return res;
    },
    handleFormSubmit() {
      this.pagination.currentPage = 1;
      this.getPageList();
    }
  }
};
</script>
